<template>
  <div id="Graph"></div>
</template>

<script lang="ts">
import { initData } from '@/common/initData'
import { FlowGraph } from '@/common/FlowGraph'
import { defineComponent, onMounted } from 'vue'
import { graphWidth, graphHeight } from '@/config/index'
/**核心组件 */
export default defineComponent({
  name: 'VFlowGraph',
  props: {
    isReady: {
      type: Boolean,
      default: false
    }
  },
  emits: ['onReady', 'update:isReady'],
  setup(props, { emit }) {
    onMounted(() => {
      // 创建画布
      const graphContainer = document.getElementById('Graph')!
      const graph = FlowGraph.init({
        container: graphContainer,
        width: graphWidth,
        height: graphHeight
      })
      graph.fromJSON(initData)
      graph.centerContent()
      /**核心画布准备就绪可进行其他工具组件的创建 */
      emit('onReady', graph)
      emit('update:isReady', true)
    })
  }
})
</script>
